<template>
	<base-popup
		class="h-[813px]"
		:titleT="title"
		:isGoBack="showBack"
		:modelValue="!!profileStore.noticeShow?.show"
		v-if="profileStore.noticeShow?.show"
		@goBack="handleBack"
		@close="handleClose">
		<div class="flex flex-col w-full py-[20px]">
			<!-- <HeaderVue :title="title" :showBack="showBack" @back="handleBack" @close="handleClose" /> -->
			<div class="h-[717px]">
				<template v-if="showBack">
					<AtMeDetail v-if="tab === 'me'" :selectId="selectId" @back="handleBack" />
					<SystemDetail v-else :type="tab" :selectId="selectId" @back="handleBack" />
				</template>
				<template v-else>
					<div class="flex justify-center">
						<div class="w-[342px]">
							<TabsVue :currentTab="tab" :tabList="tabList" @change="handleChangeTab" />
						</div>
					</div>
					<AnnouncenmentVue @toDetail="handleDetail" v-if="tab === 'announcement'" />
					<NotificationVue @toDetail="handleDetail" v-else-if="tab === 'notification'" />
					<AtMe @toDetail="handleDetail" v-else />
				</template>
			</div>
		</div>
	</base-popup>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import TabsVue from './components/tabs.vue'
import AtMe from './components/atme.vue'
import NotificationVue from './components/notification.vue'
import AnnouncenmentVue from './components/announcement.vue'
import SystemDetail from './components/detail/system-detail.vue'
import AtMeDetail from './components/detail/atme-detail.vue'
import { useProfileStore } from '@/store'
import { BasePopup } from '@/components/base'

defineOptions({ name: 'ViewsAppNotice' })

const profileStore = useProfileStore()
const tab = ref(profileStore.noticeShow?.tab || 'notification')
const title = ref('notice.title')
const selectId = ref(profileStore.noticeShow?.id || 0)

const showBack = ref(false)

const tabList = ref([
	{
		id: 'announcement',
		labelT: 'notice.tabs.announcement'
	},
	{
		id: 'notification',
		labelT: 'notice.tabs.notification'
	},
	{
		id: 'me',
		labelT: 'notice.tabs.me'
	}
])

watch(
	() => profileStore.noticeShow?.tab,
	(val) => {
		if (val) {
			console.log(val)
			tab.value = val
		}
	}
)

const handleChangeTab = (val: string) => {
	tab.value = val
}

const handleBack = () => {
	console.log('back')
	showBack.value = false
	title.value = 'notice.title'
}

const handleClose = () => {
	profileStore.showNotice({
		show: false
	})
}

const handleDetail = (id: number) => {
	console.log(id)
	title.value = 'notice.detail.title.' + tab.value
	selectId.value = id
	showBack.value = true
}

if (selectId.value) {
	handleDetail(selectId.value)
}
</script>
